<template>
    <div class="container">
        <div class="material-container">
            <Material />
        </div>
        <div class="render-container">
            <RenderComponent :renderTree="renderTree" :parentId="parentId"  />
        </div>
        <div class="component-container">
            <Component />
        </div>
    </div>
    
</template>

<script lang="ts" setup>
    import Material from '@/components/material.vue';
    import RenderComponent from '@/components/render.vue'
    import Component from '@/components/component.vue'
    import getDSL from '@/protocol'
    import loadComponent from '@/protocol/index_map';
    import { ref,reactive} from 'vue'
    import {useRenderTreeStore} from '@/store/renderTree'
    import emitter from '@/utils/emitter'
    const title=ref('首页')

    //测试数据——假设已经拖拽了一个按钮组件，其下是一个按钮的DSL
    const button_DSL=getDSL('Button')
    
    //渲染树——初始化
    const userStore=useRenderTreeStore()
    userStore.initRenderTree([]); //初始化数据，设置treeArr的值
    let renderTree=userStore.treeArr;
    const parentId=ref('root')

    //接收组件设置区的信息
    emitter.on('getMessage',(message)=>{
        console.log('接收到了',message,userStore.treeArr)
        //如果接收到了组件设置区的改变属性的操作信息，就重新赋值渲染区的渲染树数据
        renderTree=userStore.treeArr;
    })

</script>
<style lang="scss" scoped>
.container{
    min-width:1200px;
    height:100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    .material-container{
        width:300px;
        height:calc(100% - 1px);
        border:1px solid red;
        overflow-y: auto;
        overflow-x:hidden;
    }
    .render-container{
        width:600px;
        height:calc(100% - 1px);
        border:1px solid #333;
        padding:10px;
    }
    .component-container{
        width:300px;
        height:calc(100% - 1px);
        border:1px solid red;
    }
}
</style>
